Moving a product category to a separate Blogger page - step by step

Moving a product category to a separate Blogger page - step by step

Creating a separate page to display products in a specific category on Blogger improves the user experience and helps readers find the content they need faster. Let's take a look at how to do this, as well as touch on the important aspects of SEO, speed optimization, and mobile adaptation. 🚀

    Moving a product category to a separate Blogger page - step by step foto

    What is a product category widget? 🤔

    A product category widget is a special element that displays only posts from a given category of your blog on a separate page. This is a great way to:

    • Improve blog navigation.

    • Make content more accessible to readers.

    • Improve the structure of the site, which has a positive effect on SEO.

    How does the product category widget work? ⚙️

    The widget uses the capabilities of the Blogger API to automatically pull posts with category labels. It creates a dynamic representation of products (posts) in the form of cards right on the page.

    How do I set up a widget to display category products? ⚙️

    Follow the simple steps:

    Step 1. Activate the Blogger API:

    1. Go to the Google Cloud Console.

    2. Create a project and activate the API.

    3. Create an API key.

    Step 2. Customize the HTML page:

    Paste the following HTML into the page:

    <div id="category-widget">
  <h2>Category Products: Electronics</h2>
  <div id="products-container"></div>
</div>

    Step 3. Add JavaScript code:

    This script connects to the Blogger API and loads posts in the category:

    <script>
  const apiKey = "YOUR_API_KEY"; 
  const blogId = "ID_YOUR_BLOG"; 
  const label = "Electronics"; 

  const apiUrl = `https://www.googleapis.com/blogger/v3/blogs/${blogId}/posts?labels=${label}&key=${apiKey}`;

  async function loadCategoryPosts() {
    const response = await fetch(apiUrl);
    const data = await response.json();
    const container = document.getElementById("products-container");

    data.items.forEach(post => {
      const postCard = document.createElement("div");
      postCard.classList.add("product-card");
      postCard.innerHTML = `
        <a href="${post.url}" target="_blank">
          <img src="${post.images ? post.images[0].url : 'https://via.placeholder.com/150'}" alt="${post.title}" />
          <h3>${post.title}</h3>
        </a>
        <p>${post.contentSnippet}</p>
      `;
      container.appendChild(postCard);
    });
  }

  document.addEventListener("DOMContentLoaded", loadCategoryPosts);
</script>

    How to improve the appearance of the widget? 🎨

    Add styles for product cards to make them look aesthetically pleasing and attractive:

    <style>
  #category-widget {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
  }

  #products-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .product-card {
    width: 250px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 15px;
    background-color: #fff;
  }

  .product-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }

  .product-card h3 {
    font-size: 18px;
    margin: 10px 0;
  }

  .product-card p {
    font-size: 14px;
    color: #666;
  }
</style>

    How to optimize the widget for SEO? 🔍

    To make your widget "loved" by search engines, follow these recommendations:

    1. Add a meta description for the page with the widget:

      <meta name="description" content="Products in the category 'Electronics': the best offers on one page.">

    2. Implement JSON-LD structured data: This will help search engines understand the structure of the page:

      <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ItemList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Product 1",
      "url": "https://example.com/product1"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Product 2",
      "url": "https://example.com/product2"
    }
  ]
}
</script>

    3. Use alt attributes for images:

      <img src="image.jpg" alt="Product Name">

    How to speed up the loading of the widget? ⚡

    Optimizing the loading speed of the widget is critically important:

    1. Minify JavaScript and CSS code: Remove unnecessary whitespace and comments.

    2. Compress images: Use tools like TinyPNG to optimize images.

    3. Use caching: Enable caching in your Blogger settings to speed up page loads.

    How to adapt the widget for mobile devices? 📱

    Add media queries to make cards display correctly on mobile devices:

    @media (max-width: 768px) {
  .product-card {
    width: 100%;
  }
}

    Also enable zoom using the meta tag:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    How do I test the widget? ✅

    1. Open the page on different devices (desktop, tablet, smartphone).

    2. Make sure that the products from the specified category are displayed correctly.

    3. Check the loading speed through Google PageSpeed Insights.

    Creating a product category widget on Blogger is a great way to improve your site's structure, make it more user-friendly, and more appealing to your readers. Thanks to proper SEO optimization, fast loading and mobile adaptation, you will be able to highlight important categories and increase audience engagement. 🌟

    Three simple tests on this topic

    1. How to speed up the loading of the widget? Check the unnecessary:







    2. How does the product category widget work? Choose the right answer:







    3. How do I test the widget? Choose the right answer:







    Improve your karma with successful decisions !!

    Share & rate

    Moving a product category to a separate Blogger page - step by step
    4 stars - based on 5 reviews
    Loading... / Loading...

    Similar topics